<template>
    <div class="header-bar">
        <button class="collapse-toggle" @click="setSidebarCollapse(!getSystemConfig.isCollapse)">
            <span v-if="!getSystemConfig.isCollapse" class="el-icon-s-fold"></span>
            <span v-if="getSystemConfig.isCollapse" class="el-icon-s-unfold"></span>
        </button>
        <div class="header-bar-right">
            <a href="javascript:void(0);" title="刷新">
               <span class="el-icon-refresh"></span>
            </a>
            <a href="javascript:void(0);" title="消息">
              <el-badge :value="200" :max="99" class="item">
               <span class="el-icon-message-solid"></span>
              </el-badge>
            </a>
            <a href="javascript:void(0);" title="时间">
               <span class="el-icon-alarm-clock"></span>
            </a>
        </div>
    </div>
</template>

<script>
import { mapMutations , mapGetters} from 'vuex'
export default {
  computed:{
     ...mapGetters('system',[
       'getSystemConfig'
     ])
   },
   methods:{
     ...mapMutations('system',[
       'setSidebarCollapse'
     ])
   },
}
</script>

<style scoped lang="less">
  .header-bar{
    position: relative;
    top: 0;
    padding-right: 10px;
    height: 40px;
    background: linear-gradient(to bottom ,#f9f9f9 , #f1f1f1);
    border-bottom: 2px solid #2f4050d1;
    box-shadow: 0 0 1px #ccc;

    .collapse-toggle{
        position: absolute;
        left: 0;
        top: 0;
        height: 38px;
        width: 36px;
        background-color: #f9f9f9;
        border: none;
        border-right: 1px solid #ccc;
        cursor: pointer;
        font-size: 18px;
        &:hover{
          background-color: #f1f1f1;
        }
    }

    .header-bar-right{
      position: absolute;
      right: 10px;
      display: flex;
      a{
        min-width: 40px;
        height: 38px;
        background-color: #f9f9f9;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 38px;
        border-left: 1px solid #e9e9e9;
        color: #999;
        &:last-child{
          border-right: 1px solid #e9e9e9;
        }
        &:hover{
          background-color: #f1f1f1;
        }
      }
      /deep/.el-badge__content.is-fixed{
        top:5px;
      }
    }
  }
</style>